<template>
  <div style="height: 100%; width: 100%">
    <a-row :gutter="[16,16]">
      <a-col :span="span">
        <universal-status full-height single-line :data="monitorData[0]">
          {{ monitorData[0].label }}
          <wifi-outlined class="theme-color"/>
        </universal-status>
      </a-col>
      <a-col :span="span">
        <universal-status full-height single-line :data="monitorData[1]">
          {{ monitorData[1].label }}
          <global-outlined class="theme-color"/>
        </universal-status>
      </a-col>
      <a-col :span="span">
        <universal-status full-height single-line :data="monitorData[2]">
          {{ monitorData[2].label }}
          <user-outlined class="theme-color"/>
        </universal-status>
      </a-col>
      <a-col :span="span">
        <universal-status full-height single-line :data="monitorData[3]">
          {{ monitorData[3].label }}
          <api-outlined class="theme-color"/>
        </universal-status>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import UniversalStatus from '../../components/monitor/UniversalStatus';
import {ApiOutlined,GlobalOutlined,WifiOutlined,UserOutlined} from '@ant-design/icons-vue';
export default {
  name: "FortuneMonitor",
  components: {
    UniversalStatus,
    ApiOutlined,
    GlobalOutlined,
    WifiOutlined,
    UserOutlined
  },
  data() {
    return {
      monitorData: [
        {
          label: '连接',
          name: 'connection',
          tagColor: 'green',
          properties: [
            {
              label: '协议',
              value: 'ws://',
            },
            {
              label: '地址',
              value: '127.0.0.1'
            },
            {
              label: '端口',
              value: '9527'
            },
            {
              label: '造化玉碟',
              value: 'success',
              type: 'status',
              status: {
                value: 'error',
                text: '连接已断开'
              }
            }
          ]
        },
        {
          label: '戴森球计划',
          name: 'DysonSphereProgram',
          tagColor: '#f1a402',
          properties: [
            {
              label: '种子',
              value: '1919810'
            },
            {
              label: '资源倍数',
              value: '8'
            },
            {
              label: '星系数量',
              value: '64'
            },
            {
              label: '游戏运行状态',
              value: 'success',
              type: 'status',
              status: {
                value: 'processing',
                text: '正在运行'
              }
            },
            {
              label: '宇宙生成算法版本',
              value: 20200409
            }
          ]
        },
        {
          label: '玩家',
          name: 'player',
          tagColor: 'purple',
          properties: [
            {
              label: 'ID',
              value: '114514'
            },
            {
              label: '平台',
              value: 'steam'
            },
            {
              label: '游戏版本',
              value: '1.0.0.SNAPSHOT'
            }
          ]
        },
        {
          label: '造化玉碟',
          name: 'connection',
          tagColor: 'pink',
          properties: [
            {
              label: '星系',
              value: 'success',
              type: 'status',
              status: {
                value: 'success',
                text: '正常'
              }
            },
            {
              label: '数据库',
              value: 'success',
              type: 'status',
              status: {
                value: 'success',
                text: '正常'
              }
            },
            {
              label: '接口',
              value: 'success',
              type: 'status',
              status: {
                value: 'success',
                text: '正常'
              }
            },
            {
              label: '版本',
              value: 'success',
              type: 'status',
              status: {
                value: 'success',
                text: '正常'
              }
            },
          ]
        }
      ],
    }
  },
  computed: {
    span () {
      return this.$store.getters.monitorSpan;
    }
  },
  methods: {
  }
}
</script>

<style scoped>
#menu-span-slider {
  height: 80px;
}
</style>
